
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="xuejianxinokok">
<title>首页</title>
<script src="/webjars/jquery/3.5.1/jquery.js"></script>
<script src="/aa.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"                    src="/resources/dialog/dialog.js"></script>
<script type="text/javascript"                    src="/resources/dialog/tinybox2/tinybox.js"></script>
<link   type="text/css"        rel="stylesheet"  href="/resources/dialog/tinybox2/style.css" />

</head>
<body>
<br/>

<!-- <button type="button" id="btQueryJ">查询列表jsp</button>	
<button type="button" id="btQueryF">查询列表freemarker</button>	
<button type="button" id="btQueryT">查询列表thymeleaf</button> -->
<hr>
<form name="formName" id="formId">
	<span id="aazone.zoneJ">
	<!-- @end of zone [zoneJ]@ --></span>
	
	<span id="aazone.zoneT2">
	<!-- @end of zone [zoneT2]@ --></span>
	
	<span id="aazone.zoneF2">
	<!-- @end of zone [zoneF2]@ --></span>
</form>
	<span id="aazone.zoneT">
	<!-- @end of zone [zoneT]@ --></span>
	<span id="aazone.zoneView">
	<!-- @end of zone [zoneT]@ --></span>
<hr/>


<script type="text/javascript">

	function changePro(obj){	        //获取省份的id
        let pid=obj.value;
		ajaxAnywhere.getAJAX2('/t/getCityList?pid='+pid, 'zoneT2');
		ajaxAnywhere.getAJAX2('/f/getCountyList?pid=', 'zoneF2');
		refreshList();
	}
	function changeCity(obj){	        //获取市的id
        var pid=obj.value;
		ajaxAnywhere.getAJAX2('/f/getCountyList?pid='+pid, 'zoneF2');
		refreshList();
	}
	function changeCounty(obj){	        //获取市的id
		refreshList();
	}
	
	function refreshList(){
		ajaxAnywhere.getZonesToReload = function() {
			return "zoneT";
		};
	 	document.getElementById("formId").action = '/t/list';
		ajaxAnywhere.formName = "formName";
		ajaxAnywhere.submitAJAX();
	}


	function addDialog(){
		dialog.show({   
			url : '/f/dialogf?param=111&callback=listCallback',
			title : '测试窗口',
			width : 800,
			height : 550,
			scrolling : ''
		}, false);
	}

 	function view(id){
		ajaxAnywhere.getAJAX2('/f/getById?id='+id, 'zoneView');
	
	} 

$(function () {
	ajaxAnywhere.getAJAX2('/j/getProList', 'zoneJ');
	ajaxAnywhere.getAJAX2('/t/getCityList', 'zoneT2');
	ajaxAnywhere.getAJAX2('/f/getCountyList', 'zoneF2'); 
	ajaxAnywhere.getAJAX2('/t/list', 'zoneT'); 

 });






// https://www.jianshu.com/p/61b4860611b2 Component中使用slot的
//https://blog.csdn.net/u014752296/article/details/120522476   使用webcomponent增强/扩展原生元素
const template = document.createElement('template');
template.innerHTML = `<span id="aazone.zoneX">
<slot>slot default</slot>
<!-- @end of zone [zoneX]@ --></span>`;
class AaZone extends HTMLElement {
  constructor() {
    super();
    this._shadowRoot = this.attachShadow({ mode: open });
    this._shadowRoot.appendChild(template.content.cloneNode(true));
  }
}
window.customElements.define('aa-zone', AaZone);



</script>	
	
	
	
</body>
</html>
